<template>
    <div>
        <div class="vs-table-box" v-loading="loading">
            <el-form label-position="right" :inline="true" :rules="rules" class="orm-info" label-width="140px" :model="ruleForm">
                <h3>顾客信息</h3>
                <el-form-item label="顾客姓名：" v-if="ruleForm.user" prop="username">
                    {{ruleForm.user.username}}
                </el-form-item>
                <el-form-item label="性别：" prop="gender" v-if="ruleForm.user" >
                    {{ruleForm.user.gender | typeGender}}
                </el-form-item>
                <el-form-item label="手机号码：" prop="phone" v-if="ruleForm.user" >
                    {{ruleForm.user.phone}}
                </el-form-item>
                <h3>订单信息</h3>
                <div>
                    <el-table
                    :data="ruleForm.goods"
                    style="width: 100%">
                        <el-table-column prop="date" label="商品图片" width="180">
                            <template slot-scope="scope">
                                <el-image :src="scope.row.goods_images[0]" :preview-src-list="scope.row.goods_images"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="goods_name" label="商品名称"> </el-table-column>
                        <el-table-column prop="sku_text" min-width="160" label="商品规格"> </el-table-column>
                        <el-table-column prop="number" label="商品数量"> </el-table-column>
                        <el-table-column prop="sale_price" label="商品单价"> </el-table-column>
                    </el-table>
                    <div style="display: flex;flex-direction: column;">
                        <el-form-item label="共计：" prop="orders_payable">
                            {{ruleForm.orders_payable}}
                        </el-form-item>
                        <el-form-item label="订单编号：" prop="out_trade_no">
                            {{ruleForm.out_trade_no}}
                        </el-form-item>
                        <el-form-item label="订单状态：" prop="status">
                            {{ruleForm.status | orderStatus}}
                        </el-form-item>
                        <el-form-item label="订单创建时间：" prop="create_time">
                            {{ruleForm.create_time}}
                        </el-form-item>
                        <el-form-item label="订单完成时间：" prop="receive_time">
                            <span v-if="ruleForm.address&&ruleForm.address.address_type">
                                {{(ruleForm.address.address_type == 1?ruleForm.receive_time:ruleForm.address.address_time) | parseTime("{y}-{m}-{d} {h}:{i}:{s}")}}
                            </span>
                            <span v-else>{{ruleForm.receive_time}}</span>
                        </el-form-item>
                        <!-- <el-form-item label="开票状态：" >
                            
                        </el-form-item> -->
                        <template v-if="ruleForm.address">
                            <el-form-item label="配送方式：">
                                {{ruleForm.address.address_type == 1 ?'物流':'自提'}}
                            </el-form-item>
                            <template v-if="ruleForm.address.address_type==1">
                                <el-form-item label="收货人：">
                                    {{ruleForm.address.realname}}
                                </el-form-item>
                                <el-form-item label="手机号码：">
                                    {{ruleForm.address.phone}}
                                </el-form-item>
                                <el-form-item label="所在城市：" v-if="ruleForm.address.area&&ruleForm.address.area.length">
                                    {{ruleForm.address.area[0].area_name}} {{ruleForm.address.area[1].area_name}} {{ruleForm.address.area[2].area_name}}
                                </el-form-item>
                                <el-form-item label="详细地址：">
                                    {{ruleForm.address.address}}
                                </el-form-item>
                            </template>
                            <template v-else>
                                 <el-form-item label="自提门店：" >
                                    {{ruleForm.address.store.title}}
                                </el-form-item>
                                <el-form-item label="自提时间：">
                                    {{ruleForm.address.address_time | parseTime("{y}-{m}-{d} {h}:{i}:{s}")}}
                                </el-form-item>
                            </template>
                           
                        </template>
                    </div>
                </div>

            </el-form>
            <div class="vs-bottom-btns">
                <el-button @click="utils.backPage()">返回</el-button>
                <!-- <el-button type="primary">提交</el-button> -->
            </div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                img: []
            },
            dialogVisible: false,
            dialogVisible2: false,
            loading: false,
            tableData: [
                {}
            ],
            isBtn: false,
            ruleForm: {
            },
            rules: {
                username: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
                title: [{ required: true, message: '请输入企业名称', trigger: 'blur' },],
                type: [{ required: true, message: '请选择渠道', trigger: 'change' },],
                code: { required: true, message: '请输入服务码', trigger: 'blur' }
            },
        }
    },
    created(){
        this.getgoodsOrders(this.$route.query.id);
    },
    methods: {
        async getgoodsOrders(id){
            this.loading = true;
            let {code,data} = await this.$Http.getgoodsOrders({id});
            this.loading = false;
            if(code){
                data.goods.forEach(v=>{
                    v.goods_images = v.goods_images.split(',')
                })
                this.ruleForm = data;
            }
        },
        handleClose(dom) {
            dom && dom();
            this.dialogVisible = false;
        },
        setAd() {

        }
    }
}
</script>

<style lang="scss" scoped>
.imbox {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 35px;
    img {
        width: 180px;
        height: 180px;
        border-radius: 8px;
        margin-right: 30px;
    }
    video {
        width: 180px;
        height: 180px;
    }
}
</style>